<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 是否下雨了 ，如果下雨了 就带伞 其他情况不带伞 -->

    <!-- 首先获取input输入框，令名。后再获得button普通按钮，令名。 -->
    <input class="yusan"  type="text" > <button class="anniu">点击查看是否带伞</button>
    <script>
        // 在script内获取输入框和普通按钮语法如下，令名和后获取必须一样
        // 0指的是第一个按钮
        var yusan=document.getElementsByClassName("yusan")[0];
        var anniu=document.getElementsByClassName("anniu")[0];
        // 获取按钮的点击事件内包含条件，大包
        anniu.onclick = function(){
            // 新定义一个var 后获取输入框的“值”
            var box = yusan.value;
            // 获取后用if判断
            if(box=="下雨了"){
                console.log("需要带伞");
            }else{
                console.log("不带伞");
            }
            
        }
    </script>
</body>
</html>